import { CustomTheme, useCustomTheme } from '@/context/ThemeContext';
import { Button, Image, Divider, RollingText } from '@taroify/core';
import { View } from '@tarojs/components';
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import { copy } from '@/utils';
import { getUser } from '@/utils/auth';
import { useEffect, useState } from 'react';
import { UserType } from '@/types';
import { getUserOtherInfoApi } from '@/api';
import { articleMenus, auxiliaryFun, commonFun } from './center';

interface otherType {
  article: number;
  comment: number;
  fans: number;
  taste: number;
  users: number;
}
function My() {
  const { theme } = useCustomTheme();
  const [user, setUser] = useState<UserType>();
  const [other, setOther] = useState<otherType>();
  useLoad(() => {
    console.log('Page loaded.');
  });
  useDidShow(() => setUser(getUser()));
  useEffect(() => {
    if (user?.kid) {
      getUserOtherInfoApi(user.kid).then((res: otherType) => {
        setOther(res);
      });
    }
  }, [user]);

  const router = url => Taro.navigateTo({ url });

  return (
    <View className="p-3 relative text-[#91949C]">
      <View className="absolute z-0 top-0 inset-x-0 opacity-80">
        <Image
          className="w-full min-h-44"
          mode="widthFix"
          src={user?.blackGround}
        />
      </View>
      <View
        className="w-full absolute top-48 inset-x-0 rounded-t-3xl "
        style={{ backgroundColor: theme.backgroundColor }}
      >
        <View className=" z-10 flex p-4 justify-between items-center ">
          <View className="flex gap-4 items-center">
            <Image shape="circle" width={160} height={160} src={user?.avatar} />
            <View className="text-xs">
              <View
                className="text-base mb-1 font-bold"
                style={{ color: theme.titleColor }}
              >
                {user?.username}
              </View>
              <View>登陆地区：{user?.address}</View>
              <View>登陆IP：{user?.ipAddr}</View>
              <View onClick={() => copy(user?.email)}>邮箱：{user?.email}</View>
            </View>
          </View>
          <View className="flex justify-center items-center flex-col">
            <Button
              variant="outlined"
              color="info"
              hairline
              shape="round"
              size="mini"
              className="w-16"
              onClick={() => router('/pages/my/userinfo')}
            >
              编辑资料
            </Button>
          </View>
        </View>
        <View className="flex justify-around items-center">
          {articleMenus.map((item, i) => (
            <View
              onClick={() => router(item.path)}
              key={i}
              className="flex items-center justify-center flex-col"
            >
              <RollingText
                duration={1}
                className={`text-xl font-bold text-[${theme.titleColor}]`}
                startNum={0}
                targetNum={other && other[item.key]}
                stopOrder="rtl"
              />
              <View>{item.text}</View>
            </View>
          ))}
        </View>
        <Divider />
        <View className="px-2 flex flex-col gap-4">
          <View
            style={{ backgroundColor: theme.baseColor }}
            className="rounded-2xl p-3 "
          >
            <View className="font-bold" style={{ color: theme.titleColor }}>
              常用功能
            </View>
            <View className="flex items-center justify-around mt-4">
              {commonFun.map((com, i) => (
                <View
                  onClick={() => router(com.path)}
                  key={i}
                  className="flex justify-center items-center flex-col"
                >
                  {com.component}
                  <View>{com.text}</View>
                </View>
              ))}
            </View>
          </View>
          <View
            style={{ backgroundColor: theme.baseColor }}
            className="rounded-2xl p-3 "
          >
            <View className="font-bold" style={{ color: theme.titleColor }}>
              辅助功能
            </View>
            <View className="grid grid-cols-4 mt-4 gap-y-3">
              {auxiliaryFun.map(el => (
                <View
                  onClick={() => router(el.path)}
                  key={el.id}
                  className="flex justify-center items-center flex-col"
                >
                  {el.component}
                  <View className="text-xs">{el.text}</View>
                </View>
              ))}
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

export default () => (
  <CustomTheme>
    <My />
  </CustomTheme>
);
